<section class="Documentation">
  <% include ../_includes/navbar %>
  <section class="MainContent">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12 col-md-3 SubNav">
          <form class="DocSearchForm" action='/docs/search#results' method='get'>
            <label for="search-box" class="sr-only">Search</label>

            <div class="input-group">
              <input class="form-control" type="text" id="search-box" name="query" placeholder="Search the Docs">
              <span class="input-group-btn">
                <input class="btn btn-primary btn-sm" type="submit" value="search">
              </span>
            </div>
          </form>
          <% top_level_groups = Object.keys(public.docs._data.groups) %>
          <% top_level_groups = _.map(top_level_groups, function(group) { return { "title": public.docs._data.groups[group].title, "order": public.docs._data.groups[group].order, "slug":group } }) %>

          <ul class="list-unstyled">
            <% for( group of top_level_groups) { -%>
              <h2><%- group['title'] -%></h2>
            <% group_data = public.docs[group.slug]._data -%>
            <% group_data = _.sortBy(_.map(Object.keys(group_data), function(i) { return { "title": group_data[i].title, "order": group_data[i].order, "slug": i} }), "order") -%>
            <li>
              <ul class="list-unstyled">
                <% for(article_key of group_data) { -%>
                  <% active = current.path[1] == group['slug'] && current.path[2] == article_key.slug ? 'active' : '' %>
                <li class="<%= active %>"><a href="/docs/<%- group['slug'] %>/<%- article_key.slug %>"><%- article_key.title %></a></li>
              <% } -%>
              </ul>
            </li>
          <% } %>
          </ul>
        </div>
        <div class="col-xs-12 col-md-9 col-md-offset-3 ContentPage">
          <%- yield %>
          <footer class="container-fluid">
            <p class="text-center">See a way to make this page better? <br class="visible-xs" /><a href="<%="https://github.com/" + service.contributing + "/edit/master/public/" + current.path.join('/') + ".md" %>">Edit here &rarr;</a></p>
          </footer>
        </div>
      </div>
    </div>
  </section>
</section>
